<template>
  <div class="p-resets" v-if="visible">
    <div>
      <div>
        修改密码
        <font-awesome-icon :icon="['fas', 'xmark']" @click="close"/>
      </div>
      <div>
        <el-form ref="ruleFormRef" :model="info" :rules="rules">
          <div class="one-col">
            <wde-input
                label="用户账户"
                v-model="userAcc"
                :disabled="true"
            />
            <wde-input
                label="用户名"
                v-model="userName"
                :disabled="true"
            />
            <wde-input
                label="新密码"
                prop="newpwd"
                v-model="info.newpwd"
                show-password
            />
            <wde-input
                label="重复新密码"
                prop="respwd"
                v-model="info.respwd"
                show-password
            />
          </div>
        </el-form>
        <div>
          <el-button type="primary" @click="ok(ruleFormRef)">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElMessage} from 'element-plus'
import * as $api from "@/api/api.js";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  userInfo: {
    type: Object,
    default: () => ({})
  },
});
const ruleFormRef = ref(null);
const emits = defineEmits(['close']);
const userName = localStorage.getItem('userName');
const userAcc = localStorage.getItem('userAcc');
const userKey = localStorage.getItem('userKey');
const unitKey = localStorage.getItem('unitKey');
const info = ref({
  oldPwd: '',
  newpwd: '',
  respwd: ''
});
const rules = ref({
  newpwd: [
    {required: true, message: "请输入密码", trigger: "blur"},
  ],
  respwd: [
    {required: true, message: "请确认密码", trigger: "blur"},
  ],
});
const ok = (formEl) => {
  if (info.value.newpwd !== info.value.respwd) {
    ElMessage.error('两次密码不一致')
  } else {
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!')
      }
    })
    // $api.SystemChangePwd({
    //   userKey: userKey,
    //   unitKey: unitKey,
    //   oldPwd: info.value.oldPwd,
    //   newPwd: info.value.newpwd
    // }).then(res => {
    //   emits('close');
    //   ElMessage.success('修改成功');
    // })
  }
};
const close = () => {
  emits('close');
};
</script>

<style scoped lang="scss">
.one-col {
  width: 400px;
}
.el-form-item {
  margin-bottom: 22px;
}

.p-resets {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);

  > div {
    background-color: #fff;
    border-radius: 2px;

    > div {
      &:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #5bc0de;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 0;
        padding: 0 20px;
        height: 50px;

        > i {
          cursor: pointer;
          float: right;
          margin-right: -10px;
          padding: 10px;
        }
      }

      &:nth-child(2) {
        padding: 30px 60px;

        > div {
          padding-top: 10px;
          text-align: right;
        }
      }
    }
  }
}
</style>